<html lang="en-US">

<head>
    
<title>「连载三」Swagger了解一下 - 花落雨忧</title>

<meta property="og:title" content="「连载三」Swagger了解一下 - 花落雨忧">



    



    
    <meta property="description" content="在上一节，我们完成了一个服务端同时支持Rpc和RESTful Api后，你以为自己大功告成了，结果突然发现要写Api文档和前端同事对接= = 。。。
你寻思有没有什么组件能够自动化生成Api文档来解决这个问题，就在这时你发现了Swagger，一起了解一下吧！
[&amp;hellip;] Swagger是全球最大的OpenAPI规范（OAS）API开发工具框架，支持从设计和文档到测试和部署的整个API生命 &amp;hellip;">
    <meta property="og:description" content="在上一节，我们完成了一个服务端同时支持Rpc和RESTful Api后，你以为自己大功告成了，结果突然发现要写Api文档和前端同事对接= = 。。。
你寻思有没有什么组件能够自动化生成Api文档来解决这个问题，就在这时你发现了Swagger，一起了解一下吧！
[&amp;hellip;] Swagger是全球最大的OpenAPI规范（OAS）API开发工具框架，支持从设计和文档到测试和部署的整个API生命 &amp;hellip;">
    






<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1">

<link rel="shortcut icon" href="https://www.lican.site/logo/logo.png" type="image/x-icon" />



<link rel="stylesheet" href="/css/style.min.css" />

<link rel="stylesheet" href="/css/reset.min.css" />




<script src="https://www.lican.site/js/highlight.min.js"></script>

<script>
hljs.configure({ ignoreUnescapedHTML: true })
hljs.highlightAll();
</script>


<script src="https://www.lican.site/js/jquery.min.js"></script>




<link href="https://www.lican.site/css/hugo-code.min.css" rel="stylesheet" />



    <style>
        .post-content img {
            max-width: 400px;
        }
    </style>
</head>

<body id="period" class="home blog">
    <a class="skip-content" href="#main">Press "Enter" to skip to content</a>
    <div id="overflow-container" class="overflow-container">
        <header class="site-header" id="site-header" role="banner">
    <div class="max-width">
        <div id="title-container" class="title-container">
            <div id="site-title" class="site-title"><a href="/">花落雨忧</a></div>
            <p class="tagline">思所及 力所行 方为真.</p>
        </div>
        
        <div id="menu-primary-container" class="menu-primary-container">
            <div class="icon-container">
            </div>
            <div id="menu-primary" class="menu-container menu-primary" role="navigation">
                <nav class="menu">
                    <ul id="menu-primary-items" class="menu-primary-items">
                        
                        
                        <li id="menu-item-0"
                            class="menu-item menu-item-type-custom menu-item-object-custom ">
                            <a href="/posts" aria-current="page" tabindex="0">首页</a></li>
                        
                        <li id="menu-item-1"
                            class="menu-item menu-item-type-custom menu-item-object-custom ">
                            <a href="/tech/" aria-current="page" tabindex="1">技术文档</a></li>
                        
                        <li id="menu-item-2"
                            class="menu-item menu-item-type-custom menu-item-object-custom ">
                            <a href="/article/" aria-current="page" tabindex="2">文章</a></li>
                        
                        <li id="menu-item-3"
                            class="menu-item menu-item-type-custom menu-item-object-custom ">
                            <a href="/project/" aria-current="page" tabindex="3">项目</a></li>
                        
                        <li id="menu-item-4"
                            class="menu-item menu-item-type-custom menu-item-object-custom ">
                            <a href="/about/" aria-current="page" tabindex="4">关于</a></li>
                        
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</header>
        <div id="primary-container" class="primary-container">
            <div class="max-width">
                <section id="main" class="main" role="main">
                    <div id="loop-container" class="loop-container">
                        <div
                            class="post type-post status-publish format-standard hentry entry">
                            <article>
                                <div class="post-container">
                                    <div class="post-header">
                                        <h2 class="post-title">
                                            <a href="/posts/go/grpc-gateway/2018-03-04-swagger/">「连载三」Swagger了解一下</a>
                                        </h2>
                                        
                                        <div class="post-byline">Published on
                                            <a class="date" href="javascript:;">2018/03/04</a>
                                            
                                            
                                            
                                            By 
                                            <a class="author" href="javascript:;">煎鱼</a></div>
                                            
                                        
                                    </div>
                                    <div class="post-content">
                                        <p>在<a href="https://segmentfault.com/a/1190000013408485">上一节</a>，我们完成了一个服务端同时支持<code>Rpc</code>和<code>RESTful Api</code>后，你以为自己大功告成了，结果突然发现要写<code>Api</code>文档和前端同事对接= = 。。。</p>
<p>你寻思有没有什么组件能够自动化生成<code>Api</code>文档来解决这个问题，就在这时你发现了<code>Swagger</code>，一起了解一下吧！</p>
<h2 id="介绍">介绍</h2>
<h3 id="swagger">Swagger</h3>
<p><code>Swagger</code>是全球最大的<code>OpenAPI</code>规范（OAS）API开发工具框架，支持从设计和文档到测试和部署的整个API生命周期的开发</p>
<p><code>Swagger</code>是目前最受欢迎的<code>RESTful Api</code>文档生成工具之一，主要的原因如下</p>
<ul>
<li>跨平台、跨语言的支持</li>
<li>强大的社区</li>
<li>生态圈 Swagger Tools（<a href="https://github.com/swagger-api/swagger-editor">Swagger Editor</a>、<a href="https://github.com/swagger-api/swagger-codegen">Swagger Codegen</a>、<a href="https://github.com/swagger-api/swagger-ui">Swagger UI</a> &hellip;）</li>
<li>强大的控制台</li>
</ul>
<p>同时<code>grpc-gateway</code>也支持<code>Swagger</code></p>
<p>[image]</p>
<h3 id="openapi规范"><code>OpenAPI</code>规范</h3>
<p><code>OpenAPI</code>规范是<code>Linux</code>基金会的一个项目，试图通过定义一种用来描述API格式或API定义的语言，来规范<code>RESTful</code>服务开发过程。<code>OpenAPI</code>规范帮助我们描述一个API的基本信息，比如：</p>
<ul>
<li>有关该API的一般性描述</li>
<li>可用路径（/资源）</li>
<li>在每个路径上的可用操作（获取/提交&hellip;）</li>
<li>每个操作的输入/输出格式</li>
</ul>
<p>目前V2.0版本的<a href="https://github.com/OAI/OpenAPI-Specification/blob/master/versions/2.0.md">OpenAPI规范</a>（也就是SwaggerV2.0规范）已经发布并开源在github上。该文档写的非常好，结构清晰，方便随时查阅。</p>
<p>注：<code>OpenAPI</code>规范的介绍引用自<a href="https://huangwenchao.gitbooks.io/swagger/content/">原文</a></p>
<h2 id="使用">使用</h2>
<h3 id="生成swagger的说明文件">生成<code>Swagger</code>的说明文件</h3>
<p><strong>第一</strong>，我们需要检查$GOBIN下是否包含<code>protoc-gen-swagger</code>可执行文件</p>
<p>若不存在则需要执行：</p>
<pre><code>go get -u github.com/grpc-ecosystem/grpc-gateway/protoc-gen-swagger
</code></pre><p>等待执行完毕后，可在<code>$GOPATH/bin</code>下发现该执行文件，将其移动到<code>$GOBIN</code>下即可</p>
<p><strong>第二</strong>，回到<code>$GOPATH/src/grpc-hello-world/proto</code>下，执行命令</p>
<pre><code>protoc -I/usr/local/include -I. -I$GOPATH/src/grpc-hello-world/proto/google/api --swagger_out=logtostderr=true:. ./hello.proto
</code></pre><p>成功后执行<code>ls</code>即可看到<code>hello.swagger.json</code>文件</p>
<h3 id="下载swagger-ui文件">下载<code>Swagger UI</code>文件</h3>
<p><code>Swagger</code>提供可视化的<code>API</code>管理平台，就是<a href="https://github.com/swagger-api/swagger-ui">Swagger UI</a></p>
<p>我们将其源码下载下来，并将其<code>dist</code>目录下的所有文件拷贝到我们项目中的<code>$GOPATH/src/grpc-hello-world/third_party/swagger-ui</code>去</p>
<h3 id="将swagger-ui转换为go源代码">将<code>Swagger UI</code>转换为<code>Go</code>源代码</h3>
<p>在这里我们使用的转换工具是<a href="https://github.com/jteeuwen/go-bindata">go-bindata</a></p>
<p>它支持将任何文件转换为可管理的<code>Go</code>源代码。用于将二进制数据嵌入到<code>Go</code>程序中。并且在将文件数据转换为原始字节片之前，可以选择压缩文件数据</p>
<h4 id="安装">安装</h4>
<pre><code>go get -u github.com/jteeuwen/go-bindata/...
</code></pre><p>完成后，将<code>$GOPATH/bin</code>下的<code>go-bindata</code>移动到<code>$GOBIN</code>下</p>
<h4 id="转换">转换</h4>
<p>在项目下新建<code>pkg/ui/data/swagger</code>目录，回到<code>$GOPATH/src/grpc-hello-world/third_party/swagger-ui</code>下，执行命令</p>
<pre><code>go-bindata --nocompress -pkg swagger -o pkg/ui/data/swagger/datafile.go third_party/swagger-ui/...
</code></pre><h4 id="检查">检查</h4>
<p>回到<code>pkg/ui/data/swagger</code>目录，检查是否存在<code>datafile.go</code>文件</p>
<h3 id="swagger-ui文件服务器对外提供服务"><code>Swagger UI</code>文件服务器（对外提供服务）</h3>
<p>在这一步，我们需要使用与其配套的<a href="https://github.com/elazarl/go-bindata-assetfs/">go-bindata-assetfs</a></p>
<p>它能够使用<code>go-bindata</code>所生成<code>Swagger UI</code>的<code>Go</code>代码，结合<code>net/http</code>对外提供服务</p>
<h4 id="安装-1">安装</h4>
<pre><code>go get github.com/elazarl/go-bindata-assetfs/...
</code></pre><h4 id="编写">编写</h4>
<p>通过分析，我们得知生成的文件提供了一个<code>assetFS</code>函数，该函数返回一个封装了嵌入文件的<code>http.Filesystem</code>，可以用其来提供一个<code>HTTP</code>服务</p>
<p>那么我们来编写<code>Swagger UI</code>的代码吧，主要是两个部分，一个是<code>swagger.json</code>，另外一个是<code>swagger-ui</code>的响应</p>
<h5 id="serveswaggerfile">serveSwaggerFile</h5>
<p>引用包<code>strings</code>、<code>path</code></p>
<pre><code>func serveSwaggerFile(w http.ResponseWriter, r *http.Request) {
      if ! strings.HasSuffix(r.URL.Path, &quot;swagger.json&quot;) {
        log.Printf(&quot;Not Found: %s&quot;, r.URL.Path)
        http.NotFound(w, r)
        return
    }

    p := strings.TrimPrefix(r.URL.Path, &quot;/swagger/&quot;)
    p = path.Join(&quot;proto&quot;, p)

    log.Printf(&quot;Serving swagger-file: %s&quot;, p)

    http.ServeFile(w, r, p)
}
</code></pre><p>在函数中，我们利用<code>r.URL.Path</code>进行路径后缀判断</p>
<p>主要做了对<code>swagger.json</code>的文件访问支持（提供<code>https://127.0.0.1:50052/swagger/hello.swagger.json</code>的访问）</p>
<h5 id="serveswaggerui">serveSwaggerUI</h5>
<p>引用包<code>github.com/elazarl/go-bindata-assetfs</code>、<code>grpc-hello-world/pkg/ui/data/swagger</code></p>
<pre><code>func serveSwaggerUI(mux *http.ServeMux) {
    fileServer := http.FileServer(&amp;assetfs.AssetFS{
        Asset:    swagger.Asset,
        AssetDir: swagger.AssetDir,
        Prefix:   &quot;third_party/swagger-ui&quot;,
    })
    prefix := &quot;/swagger-ui/&quot;
    mux.Handle(prefix, http.StripPrefix(prefix, fileServer))
}
</code></pre><p>在函数中，我们使用了<a href="https://github.com/elazarl/go-bindata-assetfs/">go-bindata-assetfs</a>来调度先前生成的<code>datafile.go</code>，结合<code>net/http</code>来对外提供<code>swagger-ui</code>的服务</p>
<h4 id="结合">结合</h4>
<p>在完成功能后，我们发现<code>path.Join(&quot;proto&quot;, p)</code>是写死参数的，这样显然不对，我们应该将其导出成外部参数，那么我们来最终改造一番</p>
<p>首先我们在<code>server.go</code>新增包全局变量<code>SwaggerDir</code>，修改<code>cmd/server.go</code>文件：</p>
<pre><code>package cmd

import (
	&quot;log&quot;

	&quot;github.com/spf13/cobra&quot;
	
	&quot;grpc-hello-world/server&quot;
)

var serverCmd = &amp;cobra.Command{
	Use:   &quot;server&quot;,
	Short: &quot;Run the gRPC hello-world server&quot;,
	Run: func(cmd *cobra.Command, args []string) {
		defer func() {
			if err := recover(); err != nil {
				log.Println(&quot;Recover error : %v&quot;, err)
			}
		}()
		
		server.Run()
	},
}

func init() {
	serverCmd.Flags().StringVarP(&amp;server.ServerPort, &quot;port&quot;, &quot;p&quot;, &quot;50052&quot;, &quot;server port&quot;)
	serverCmd.Flags().StringVarP(&amp;server.CertPemPath, &quot;cert-pem&quot;, &quot;&quot;, &quot;./conf/certs/server.pem&quot;, &quot;cert-pem path&quot;)
	serverCmd.Flags().StringVarP(&amp;server.CertKeyPath, &quot;cert-key&quot;, &quot;&quot;, &quot;./conf/certs/server.key&quot;, &quot;cert-key path&quot;)
	serverCmd.Flags().StringVarP(&amp;server.CertServerName, &quot;cert-server-name&quot;, &quot;&quot;, &quot;grpc server name&quot;, &quot;server's hostname&quot;)
	serverCmd.Flags().StringVarP(&amp;server.SwaggerDir, &quot;swagger-dir&quot;, &quot;&quot;, &quot;proto&quot;, &quot;path to the directory which contains swagger definitions&quot;)
	
	rootCmd.AddCommand(serverCmd)
}
</code></pre><p>修改<code>path.Join(&quot;proto&quot;, p)</code>为<code>path.Join(SwaggerDir, p)</code>，这样的话我们<code>swagger.json</code>的文件路径就可以根据外部情况去修改它</p>
<p>最终<code>server.go</code>文件内容：</p>
<pre><code>package server

import (
    &quot;crypto/tls&quot;
    &quot;net&quot;
    &quot;net/http&quot;
    &quot;log&quot;
    &quot;strings&quot;
    &quot;path&quot;

    &quot;golang.org/x/net/context&quot;
    &quot;google.golang.org/grpc&quot;
    &quot;google.golang.org/grpc/credentials&quot;
    &quot;github.com/grpc-ecosystem/grpc-gateway/runtime&quot;
    &quot;github.com/elazarl/go-bindata-assetfs&quot;
    
    pb &quot;grpc-hello-world/proto&quot;
    &quot;grpc-hello-world/pkg/util&quot;
    &quot;grpc-hello-world/pkg/ui/data/swagger&quot;
)

var (
    ServerPort string
    CertServerName string
    CertPemPath string
    CertKeyPath string
    SwaggerDir string
    EndPoint string

    tlsConfig *tls.Config
)

func Run() (err error) {
    EndPoint = &quot;:&quot; + ServerPort
    tlsConfig = util.GetTLSConfig(CertPemPath, CertKeyPath)

    conn, err := net.Listen(&quot;tcp&quot;, EndPoint)
    if err != nil {
        log.Printf(&quot;TCP Listen err:%v\n&quot;, err)
    }

    srv := newServer(conn)

    log.Printf(&quot;gRPC and https listen on: %s\n&quot;, ServerPort)

    if err = srv.Serve(util.NewTLSListener(conn, tlsConfig)); err != nil {
        log.Printf(&quot;ListenAndServe: %v\n&quot;, err)
    }

    return err
}
 
func newServer(conn net.Listener) (*http.Server) {
    grpcServer := newGrpc()
    gwmux, err := newGateway()
    if err != nil {
        panic(err)
    }

    mux := http.NewServeMux()
    mux.Handle(&quot;/&quot;, gwmux)
    mux.HandleFunc(&quot;/swagger/&quot;, serveSwaggerFile)
    serveSwaggerUI(mux)

    return &amp;http.Server{
        Addr:      EndPoint,
        Handler:   util.GrpcHandlerFunc(grpcServer, mux),
        TLSConfig: tlsConfig,
    }
}

func newGrpc() *grpc.Server {
    creds, err := credentials.NewServerTLSFromFile(CertPemPath, CertKeyPath)
    if err != nil {
        panic(err)
    }

    opts := []grpc.ServerOption{
        grpc.Creds(creds),
    }
    server := grpc.NewServer(opts...)

    pb.RegisterHelloWorldServer(server, NewHelloService())

    return server
}

func newGateway() (http.Handler, error) {
    ctx := context.Background()
    dcreds, err := credentials.NewClientTLSFromFile(CertPemPath, CertServerName)
    if err != nil {
        return nil, err
    }
    dopts := []grpc.DialOption{grpc.WithTransportCredentials(dcreds)}
    
    gwmux := runtime.NewServeMux()
    if err := pb.RegisterHelloWorldHandlerFromEndpoint(ctx, gwmux, EndPoint, dopts); err != nil {
        return nil, err
    }

    return gwmux, nil
}

func serveSwaggerFile(w http.ResponseWriter, r *http.Request) {
      if ! strings.HasSuffix(r.URL.Path, &quot;swagger.json&quot;) {
        log.Printf(&quot;Not Found: %s&quot;, r.URL.Path)
        http.NotFound(w, r)
        return
    }

    p := strings.TrimPrefix(r.URL.Path, &quot;/swagger/&quot;)
    p = path.Join(SwaggerDir, p)

    log.Printf(&quot;Serving swagger-file: %s&quot;, p)

    http.ServeFile(w, r, p)
}

func serveSwaggerUI(mux *http.ServeMux) {
    fileServer := http.FileServer(&amp;assetfs.AssetFS{
        Asset:    swagger.Asset,
        AssetDir: swagger.AssetDir,
        Prefix:   &quot;third_party/swagger-ui&quot;,
    })
    prefix := &quot;/swagger-ui/&quot;
    mux.Handle(prefix, http.StripPrefix(prefix, fileServer))
}
</code></pre><h2 id="测试">测试</h2>
<p>访问路径<code>https://127.0.0.1:50052/swagger/hello.swagger.json</code>，查看输出内容是否为<code>hello.swagger.json</code>的内容，例如：
[image]</p>
<p>访问路径<code>https://127.0.0.1:50052/swagger-ui/</code>，查看内容
[image]</p>
<h2 id="小结">小结</h2>
<p>至此我们这一章节就完毕了，<code>Swagger</code>和其生态圈十分的丰富，有兴趣研究的小伙伴可以到其<a href="https://swagger.io/">官网</a>认真研究</p>
<p>而目前完成的程度也满足了日常工作的需求了，可较自动化的生成<code>RESTful Api</code>文档，完成与接口对接</p>
<h2 id="参考">参考</h2>
<h3 id="示例代码">示例代码</h3>
<ul>
<li><a href="https://github.com/EDDYCJY/grpc-hello-world">grpc-hello-world</a></li>
</ul>


                                        
                                        
                                        
                                        <div class="rp4wp-related-posts">
                                            <h3>相关文章</h3>
                                            <ul>
                                                
                                                <li>
                                                    <div class="rp4wp-related-post-content">
                                                        <a
                                                            href="https://www.lican.site/posts/go/grpc-gateway/2018-02-27-hello-world/">「连载二」Hello World</a>
                                                    </div>
                                                </li>
                                                
                                                <li>
                                                    <div class="rp4wp-related-post-content">
                                                        <a
                                                            href="https://www.lican.site/posts/go/grpc-gateway/2018-02-23-install/">「连载一」gRPC介绍与环境安装</a>
                                                    </div>
                                                </li>
                                                
                                                <li>
                                                    <div class="rp4wp-related-post-content">
                                                        <a
                                                            href="https://www.lican.site/posts/go/gin/2018-02-15-log/">「连载六」编写一个简单的文件日志</a>
                                                    </div>
                                                </li>
                                                
                                                <li>
                                                    <div class="rp4wp-related-post-content">
                                                        <a
                                                            href="https://www.lican.site/posts/go/gin/2018-02-14-jwt/">「连载五」使用 JWT 进行身份校验</a>
                                                    </div>
                                                </li>
                                                
                                                <li>
                                                    <div class="rp4wp-related-post-content">
                                                        <a
                                                            href="https://www.lican.site/posts/go/gin/2018-02-13-api-03/">「连载四」Gin搭建Blog API&#39;s （三）</a>
                                                    </div>
                                                </li>
                                                
                                            </ul>
                                        </div>
                                        
                                        
                                    </div>

                                    
                                    
                                    

                                    
                                    <div class="post-meta">
                                        
                                        
                                        <div class="post-tags">
                                            <ul>
                                            
                                            <li>
                                                <a href="/tags/go" title="View all posts tagged match">go</a>
                                            </li>
                                            
                                            <li>
                                                <a href="/tags/grpc-gateway" title="View all posts tagged match">grpc-gateway</a>
                                            </li>
                                            
                                            </ul>
                                        </div>
                                        
                                        
                                        <nav class="further-reading">
                                            
                                            <div class="previous">
                                                <span>&lt;&lt; Prev</span>
                                                <a href="https://www.lican.site/posts/go/grpc-gateway/2018-02-27-hello-world/"
                                                    rel="prev">「连载二」Hello World</a> </div>
                                            
                                            
                                            <div class="next">
                                                <span>Next >></span>
                                                <a href="https://www.lican.site/posts/go/talk/2018-03-13-golang-relatively-path/">聊一聊，Go 的相对路径问题</a> 
                                            </div>
                                            
                                        </nav>
                                    </div>
                                    
                                    

                                    
                                    
                                    

                                </div>
                            </article>
                        </div>
                    </div>
                </section>
                <aside class="sidebar sidebar-primary" id="sidebar-primary" role="complementary">
    <h1 class="screen-reader-text">Sidebar</h1>
    

    
    
    <section id="text-2" class="widget widget_text">
        <div class="textwidget">
            
            <div id="profile">
                <div id="profile_picture"><img src="https://www.lican.site/logo/logo.png"></div>
                <div id="profile_intro">
                    <p><span class="name">Lican</span></p>
                    <p class="intro">全栈开发者，爱好造轮子。</p>
                </div>
            </div>
            
            <p>
                <script type="text/javascript">
                    (function ($) {
                        $(document).ready(function () {
                            var menuPrimaryContainer = $('#menu-primary-container');
                            var profile = $('#text-2');
                            $('#toggle-navigation').click(function () {
                                if (menuPrimaryContainer.hasClass('open')) {
                                    profile.removeClass('open');
                                } else {
                                    profile.addClass('open');
                                }
                            });
                        });
                    })(jQuery);
                </script>
            </p>
        </div>
    </section>
    
    
    
    
    
    <section id="text-5" class="widget widget_text">
        <h2 class="widget-title">开源项目</h2>
        <div class="textwidget">
            <div id="projects" style="line-height: 22px;">
                
                <a href="https://github.com/idoubi/gonews"
                    target="_blank">gonews</a>: &nbsp;Daily news for golang<br>
                
                <a href="https://github.com/idoubi/sql2struct"
                    target="_blank">sql2struct</a>: &nbsp;Generate go struct according to SQL<br>
                
                <a href="https://github.com/idoubi/goz"
                    target="_blank">goz</a>: &nbsp;Request library used in golang<br>
                
        </div>
    </section>
    
    

    
    
    
    
    

    
    
    

    
    
    

    
    
    
    
</aside>
            </div>
        </div>

        <footer id="site-footer" class="site-footer" role="contentinfo">
    <div class="max-width">
    </div>
    <div class="footer">
        <div id="footercontent">
            © lican.vip All rights reserved<br/>
            Built with Hugo Theme <a href="https://github.com/idoubi/hugo-theme-period" target="_blank">Period</a>
        </div>
    </div>
</footer>

<script>
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?e8351b6d4626d5881d439ea1f6184baa";
      var s = document.getElementsByTagName("script")[0]; 
      s.parentNode.insertBefore(hm, s);
    })();
</script>
    
    
    </div>
    
</body>

</html>